/**
 * Created by HZH
 * Date-Time: 2022-02-16
 */

import * as charts from 'echarts';
import ReactEcharts from 'echarts-for-react';
import React from 'react';

export default (props) => {
  const { height = '200px', title = 'title', value = 0 } = props;
  const option = {
    title: {
      text: title,
      bottom: 5,
      left: 'center',
      textStyle: {
        fontSize: 13,
        color: '#fff',
      },
    },
    tooltip: {
      formatter: '{a}：{c}',
    },
    series: [
      {
        name: title,
        type: 'gauge',
        axisLine: {
          lineStyle: {
            width: 6,
            color: [
              [0.3, '#67e0e3'],
              [0.7, '#37a2da'],
              [1, '#fd666d'],
            ],
          },
        },
        pointer: {
          itemStyle: {
            color: 'auto',
          },
        },
        axisTick: {
          distance: -8,
          length: 5,
          lineStyle: {
            color: 'auto',
            width: 1,
          },
        },
        splitLine: {
          distance: -8,
          length: 10,
          lineStyle: {
            color: '#fff',
            width: 1,
          },
        },
        axisLabel: {
          show: false,
          color: 'auto',
          distance: 20,
          fontSize: 12,
        },
        detail: {
          valueAnimation: true,
          formatter: '{value}',
          color: 'auto',
          fontSize: 12,
        },
        data: [
          {
            value,
          },
        ],
      },
    ],
  };

  return (
    <ReactEcharts
      style={{
        width: '100%',
        height: '100%',
        minHeight: height,
      }}
      option={option}
    />
  );
};
